<template>
    <div class="WorkingCondition">
        <p style="font-size: 14px; font-weight: 700; color: rgba(162, 182, 255, 1);">
            毕业生工作状态
        </p>
    </div>
    <div ref="chart" class="WorkingCondition_Bottom">

    </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, onBeforeUnmount, ref } from 'vue';

const chart = ref(null);
let myChart = null;

// 图表数据
const chartData = [
    { value: 86, name: '已就业', itemStyle: { color: '#00C853' } }, // 绿色
    { value: 8, name: '未就业', itemStyle: { color: '#2979FF' } },  // 蓝色
    { value: 2, name: '返校重听', itemStyle: { color: '#FF5252' } },  // 红色
    { value: 2, name: '以往未就业', itemStyle: { color: '#FFEB3B' } }, // 黄色
    { value: 2, name: '返回未就业', itemStyle: { color: '#AB47BC' } }, // 紫色
];

const WorkingCondition = () => {
    myChart = echarts.init(chart.value);
    window.addEventListener('resize', function () {
        myChart.resize();
    });
    const option = {
        backgroundColor: '#0B2242', // 深蓝色背景
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)',
        },
        legend: {
            show: false, // 隐藏默认图例，手动设置标签
        },
        series: [
            {
                name: '就业情况',
                type: 'pie',
                radius: ['50%', '70%'], // 内外半径，形成环形
                roseType: 'radius',
                avoidLabelOverlap: false,
                label: {
                    show: true,
                    position: 'outside', // 标签显示在外部
                    formatter: '{b}\n{d}%', // 格式化标签内容：显示类别和百分比
                    color: '#fff', // 标签文字颜色
                    alignTo: 'labelLine', // 保持标签与线对齐
                    distanceToLabelLine: 5, // 标签与线段的距离
                },
                labelLine: {
                    show: true,
                    length: 10, // 第一段线长
                    length2: 40, // 第二段线长，控制弯曲效果
                    // smooth: true, // 设置线条为曲线
                    lineStyle: {
                        color: '#fff', // 线条颜色
                        width: 2, // 线条宽度
                    },
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '16',
                        fontWeight: 'bold',
                    },
                },
                data: chartData,
            },
        ],
    };

    myChart.setOption(option); // 设置图表配置
}

onMounted(() => {
    WorkingCondition();
})

onBeforeUnmount(() => {
    if (myChart) {
        myChart.dispose();  // 销毁图表实例，清理资源
    }
});
</script>

<style lang="scss" scoped>
.WorkingCondition {
    position: fixed;
    left: 70px;
    top: 470px;
    width: 330px;
    height: 30px;
    opacity: 1;
    /* background: linear-gradient(229.52deg, rgba(14, 95, 255, 0.5) 0%, rgba(14, 95, 255, 0.22) 100%);
    border: 1.6px solid rgba(61, 110, 174, 1); */
    background-image: url('../../assets/Path2.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    line-height: 30px;

    p {
        margin-left: 14px;
    }
}

.WorkingCondition_Bottom {
    width: 330px;
    height: 200px;
    opacity: 1;
    background: rgba(12, 29, 95, 1);
    position: fixed;
    left: 70px;
    top: 510px;
}
</style>